<template>
  <div class="main_box" style="padding-right:10px">
      <div class="add_wrap">
          <div class="tit">
            <h2>{{dataForm.beeperId?'编辑呼叫器信息':'新增呼叫器'}}</h2>
            <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
          </div>
          <el-form :model="dataForm" ref="dataForm" label-width="180px" :rules="roleRules">
              <el-row>
                  <el-form-item label="呼叫器名称" prop="beeperName">
                    <el-input v-model="dataForm.beeperName" @keydown.native="keydown($event)"></el-input>
                  </el-form-item>
                  <el-form-item label="呼叫器编号" prop="beeperCode">
                    <el-input v-model="dataForm.beeperCode" @keydown.native="keydown($event)"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="呼叫器类型" prop="beeperType">
                    <el-input v-model="dataForm.beeperType" disabled></el-input>
                  </el-form-item> -->
                  <el-form-item label="wifi名称" prop="wifiName">
                    <el-input v-model="dataForm.wifiName" @keydown.native="keydown($event)"></el-input>
                  </el-form-item>
                  <el-form-item label="wifi密码" prop="wifiPwd">
                    <el-input v-model="dataForm.wifiPwd" @keydown.native="keydown($event)"></el-input>
                  </el-form-item>
                  <el-form-item label="住户名称" prop="linkName">
                    <el-select placeholder="请选择住户名称" filterable v-model="dataForm.houseId" style="width:100%" clearable>
                        <el-option 
                        v-for="item in houseList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="备 注 " prop="remark">
                    <el-input type="textarea" v-model="dataForm.remark"></el-input>
                  </el-form-item>

              </el-row>
                <!-- 第二种 -->
              <el-row>
                <div class="tit">
                    <h2>服务信息</h2>
                    <el-button 
                        icon="el-icon-plus" 
                        type="success" 
                        plain 
                        size="medium" 
                        circle 
                        @click="addBtn" 
                        :disabled="dataForm.equipBeeperBtnList.length==this.listLength">
                    </el-button>
                </div>
                <el-table :data="dataForm.equipBeeperBtnList"  style="width:max-content">
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button 
                                icon="el-icon-minus" 
                                type="danger" 
                                plain 
                                size="medium" 
                                @click="subBtn(scope.$index)" 
                                circle>
                            </el-button>
                        </template>
                     </el-table-column>

                    <el-table-column label="服务编号" width="200" align="center">
                        <template slot-scope="scope">
                            <el-input   v-model.trim="scope.row.btnCode" clearable></el-input>
                        </template>
                     </el-table-column>

                     <el-table-column label="服务" width="200" align="center">
                        <template slot-scope="scope">
                            <el-select placeholder="请选择服务" v-model="scope.row.serverId" clearable filterable @change="serverChange(scope.$index)">
                                <el-option v-for="item in serverList" 
                                :key="item.name" 
                                :label="item.name"
                                :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </template>
                     </el-table-column>
                     <el-table-column label="商户" width="200" align="center" >
                         <template slot-scope="scope">
                            <el-select placeholder="请选择商户" v-model="scope.row.businessId" clearable filterable>
                                <el-option v-for="item2 in scope.row.businessList" 
                                :key="item2.name" 
                                :label="item2.name"
                                :value="item2.id"
                                >
                                </el-option>
                            </el-select>
                        </template>
                     </el-table-column>
                </el-table>
              </el-row>
              <el-row>
                    <el-form-item>
                    <el-button plain type="primary" @click="sureClick">保 存</el-button>
                    <el-button plain @click="returnList">取 消</el-button>
                    </el-form-item>
              </el-row>
          </el-form>
      </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import EquipApi from '@/api/equip/equip';

export default {
    name:"BeeperAdd",
    data(){
        return{
            dataForm:{
                beeperId: '',
                beeperName: '',
                beeperCode:"",
                // beeperType:null,
                wifiName: '',
                wifiPwd: '',
                houseId:"",
                equipBeeperBtnList:[
                    // {
                    //     btnCode:"",
                    //     serverId:"",
                    //     businessId:"",
                    //     businessList:[], //商品列表放在这里，发送请求的时候过滤掉
                    // }
                    

                ],
                remark: ''
            },
            roleRules: {
                beeperName: [
                    { required: true, message: "请输入呼叫器名称", trigger: "blur" },
                    { max: 20, message: '长度不超过20个字', trigger: 'blur' }
                ],
                beeperCode: [
                    { required: true, message: "请输入呼叫器编号", trigger: "blur" },
                ],
                beeperState:[
                    { required: true, message: "", trigger: "blur" },
                ],
                wifiName: [
                    { required: true, message: "请输入WIFI名称", trigger: "blur" }
                ],
                wifiPwd: [
                    { required: true, message: "请输入WIFI密码", trigger: "blur" }
                ],
            },
            houseList:[],//住户列表
            serverList:[],//服务列表
            listLength:8, //服务最大的选择数量
        }
    },
    mounted(){
        this.init();
    },
    
    methods:{
        init(){
            // 获取住户列表
            this.getHouseList()
            // 获取全部的服务列表
            this.getserverList()
            if (this.$route.query.id) {
                this.dataForm.beeperId = this.$route.query.id
                this.getData();
            }else{
                for(var i = 1;i<=this.listLength;i++){
                    this.dataForm.equipBeeperBtnList.push({btnCode:i,serverId:"",businessId:"",businessList:[]})
                }
                
            }
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },
        getData(){
            var cond ={
                id: this.dataForm.beeperId
            }
            EquipApi.getEquipBeeperInfo(cond)
                .then(res =>{
                    
                    // 获取每个服务对应的商户列表
                    let equipBeeperBtnList = res.data.equipBeeperBtnList.map(item=>{
                        return {btnCode:item.btnCode,serverId:item.serverId,businessId:item.businessId,businessList:[]}
                    })

                    equipBeeperBtnList.forEach(item=>{
                        // 如果存在服务那么就需要请求对应的商户列表
                        if(item.serverId){
                            EquipApi.getBeeperBusinessInfoByBusinessId({serverId:item.serverId}).then(res=>{
                                item.businessList = res.data
                            })
                        }
                        
                    })
                    this.dataForm.beeperName = res.data.beeperName,
                    this.dataForm.beeperCode = res.data.beeperCode
                    this.dataForm.wifiName = res.data.wifiName,
                    this.dataForm.wifiPwd = res.data.wifiPwd,
                    this.dataForm.houseId = res.data.beeperHouse.houseId
                    // this.dataForm.beeperType = res.data.beeperType
                    this.dataForm.equipBeeperBtnList = equipBeeperBtnList
                    this.dataForm.remark = res.data.remark
                })
        },
        addBtn(){
            this.dataForm.equipBeeperBtnList.push({btnCode:"",serverId:"",businessId:"",businessList:[]})
        },
        subBtn(index){
            this.dataForm.equipBeeperBtnList.splice(index,1)
        },
        // isLast(index){
        //     return index == this.dataForm.equipBeeperBtnList.length-1
        // },
        // 获取全部住户
        getHouseList(){
            EquipApi.listHouse().then(res=>{
                this.houseList = res.data 
            })
        },
        // 获取服务列表
        getserverList(){
            EquipApi.listBeeperServer().then(res=>{
                this.serverList = res.data
            })
        },  
        // 服务选择框改变值的时候调用函数,
        serverChange(index){
            this.dataForm.equipBeeperBtnList[index].businessId = ""
            this.dataForm.equipBeeperBtnList[index].businessList = []
            this.getBusinessList(index)
        },
        // 通过服务id来获取商户列表 
        getBusinessList(index){
            let serverId = this.dataForm.equipBeeperBtnList[index].serverId
            if(serverId){
                EquipApi.getBeeperBusinessInfoByBusinessId({serverId}).then(res=>{
                    this.dataForm.equipBeeperBtnList[index].businessList = res.data
                })
            }
        },
        sureClick(){
            // 提交
            this.$refs.dataForm.validate(valid =>{
                if(valid) {
                    this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                        .then(() => {
                            this.dataForm.equipBeeperBtnList = this.dataForm.equipBeeperBtnList.filter(item=>{
                                return item.serverId!==""
                            })
                            
                            
                            let flag = this.dataForm.equipBeeperBtnList.some(item=>{
                                return item.btnCode==""||item.businessId==""
                            })
                            if(flag){
                                this.$message("请完善服务信息")
                                return
                            }

                            // 过滤dataForm里面的的equipBeeperBtnList去掉businessList

                            this.equipBeeperBtnList = this.dataForm.equipBeeperBtnList.map(item=>{
                                return {btnCode:item.btnCode,serverId:item.serverId,businessId:item.businessId}
                            })
                             

                            if(this.dataForm.beeperId){
                                this.editData();
                            }else{
                                this.addData();
                            }
                        });
                }
            })
        },
        editData(){
            // 编辑
            var cond = {
                beeperId: this.dataForm.beeperId,
                beeperName: this.dataForm.beeperName,
                beeperCode:this.dataForm.beeperCode,
                // beeperType: this.dataForm.beeperType,
                wifiName:this.dataForm.wifiName,
                wifiPwd: this.dataForm.wifiPwd,
                houseId:this.dataForm.houseId,
                equipBeeperBtnList:this.equipBeeperBtnList,
                remark: this.dataForm.remark
            }
            EquipApi.editEquipBeeper(cond)
                .then(data =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        addData(){
            // 新增
            var cond = {
                beeperName: this.dataForm.beeperName,
                beeperCode:this.dataForm.beeperCode,
                // beeperType: this.dataForm.beeperType,
                wifiName:this.dataForm.wifiName,
                wifiPwd: this.dataForm.wifiPwd,
                houseId:this.dataForm.houseId,
                equipBeeperBtnList:this.equipBeeperBtnList,
                remark: this.dataForm.remark
            }
            EquipApi.addEquipBeeper(cond)
                .then(data =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        returnList(){
            // 返回上一界面
            this.dataForm = [];
            this.$store.dispatch('delView', this.$route);
            this.$router.push({path: '/equip/beeperManagement'});
        }
    }
}
</script>

<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
<style  lang="scss">
    .container{
        display:flex;
        align-items: center;
        margin:10px 180px;
        .addAndSub{
            position: absolute;
            cursor: pointer;
            width:40px;
            height:40px;
            background-color:grey;
            border-radius:50%;
            font-size: 30px;
            color: aliceblue;
            text-align: center;
            line-height: 40px;
        }
        .add{
            right: 300px;
        }
        .sub{
            left: 100px;
            
        }
        .separate{
            width:30px;
            height:1px;
            background-color:grey;
            margin: 0 4px
        }
    }
    
</style>
